import React, { memo, useEffect, useState } from "react";
import { Modal, Button } from "antd";
import axios from "axios";
const DetailModal = memo(
  ({ detailHandleCancel, detailModalVisible, tableDtaaInfoDetail }) => {
    const [btnVisible, setBtnVisible] = useState(true);
    useEffect(() => {
      if (btnVisible) {
        let NodeListEl = document.querySelectorAll("input");
        for (var i = 0; i < NodeListEl.length; i++) {
          for (var m = 0; m < tableDtaaInfoDetail?.values.length; m++) {
            let inpEl = tableDtaaInfoDetail?.values[m];
            if (NodeListEl[i].name === inpEl.key) {
              NodeListEl[i].value = inpEl.value;
            }
          }
        }
        let TextListEl = document.querySelectorAll("textarea");
        for (let j = 0; j < TextListEl.length; j++) {
          for (let n = 0; n < tableDtaaInfoDetail?.values.length; n++) {
            let TextDEl = tableDtaaInfoDetail?.values[n];
            if (TextListEl[j].name === TextDEl.key) {
              TextListEl[j].value = TextDEl.value;
            }
          }
        }
        let nameEl = document.querySelector(".name");
        let cateEl = document.querySelector(".cate");
        nameEl.value = tableDtaaInfoDetail?.doc?.name;
        cateEl.value = tableDtaaInfoDetail?.doc?.cate;
      }
    }, [tableDtaaInfoDetail, btnVisible]);

    const btnClickVisible = () => {
      setBtnVisible(!btnVisible);
    };

    const onFinish = () => {
      let data = {};
      let NodeListEl = document.querySelectorAll("input");
      let NodeListTextareaEl = document.querySelectorAll("textarea");

      for (let i = 0; i < NodeListEl.length; i++) {
        let inpEl = NodeListEl[i].name;
        data[inpEl] = NodeListEl[i].value;
      }

      for (let i = 0; i < NodeListTextareaEl.length; i++) {
        let TextEl = NodeListTextareaEl[i].name;
        data[TextEl] = NodeListTextareaEl[i].value;
      }

      axios({
        method: "PUT",
        url: `http://192.168.200.129:8081/wordDoc/updateRecord`,
        data: { ...data, id: tableDtaaInfoDetail?.doc?.id },
        timeout: 30000,
      })
        .then((res) => {
          if (res.data.code === 200) {
            detailHandleCancel && detailHandleCancel();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    };

    return (
      <div>
        <Modal
          title="详情"
          open={detailModalVisible}
          onOk={onFinish}
          onCancel={detailHandleCancel}
          width="760px"
        >
          <Button onClick={btnClickVisible} type="primary">
            切换页面
          </Button>
          {btnVisible ? (
            <div>
              <div>
                <div>
                  名称:
                  <input
                    type="text"
                    name="name"
                    className="name"
                    style={{ margin: "10px 50px 0 0", height: "30px" }}
                  />
                  分类:
                  <input
                    type="text"
                    name="cate"
                    className="cate"
                    style={{ height: "30px" }}
                  />
                </div>
              </div>
              <div
                dangerouslySetInnerHTML={{
                  __html: tableDtaaInfoDetail?.template,
                }}
              ></div>
            </div>
          ) : (
            <div
              dangerouslySetInnerHTML={{
                __html: tableDtaaInfoDetail?.html,
              }}
            ></div>
          )}
        </Modal>
      </div>
    );
  }
);

export default DetailModal;
